<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CRM登录</title>
		<script src="/js/vue.js"></script>
		<script src="/js/axios.js"></script>
		<script src="/js/qs.js"></script>
		<script src="/js/jquery.min.js"></script>
		<!-- import Vue.js -->
		<script src="//vuejs.org/js/vue.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background: #fff url(../imgs/login/demo-1-bg.jpg) 50% 50% no-repeat;
	background-size: cover;
}

.dowebok {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 440px;
	height: 300px;
	margin: -160px 0 0 -215px;
	border: 1px solid #fff;
	border-radius: 20px;
	overflow: hidden;
}


.form-item {
	position: relative;
	width: 360px;
	margin: 33px auto;
	padding-bottom: 10px;
}

.form-item input {
	width: 288px;
	height: 48px;
	padding-left: 70px;
	border: 1px solid #fff;
	border-radius: 25px;
	font-size: 18px;
	color: #fff;
	background-color: transparent;
	outline: none;
}

.form-item button {
	width: 360px;
	height: 50px;
	border: 0;
	border-radius: 25px;
	font-size: 18px;
	color: #1f6f4a;
	outline: none;
	cursor: pointer;
	background-color: #fff;
}

#username {
	background: url(../imgs/login/emil.png) 20px 14px no-repeat;
}

#password {
	background: url(../imgs/login/password.png) 23px 11px no-repeat;
}

.tip {
	/* display: none; */
	position: absolute;
	left: 20px;
	top: 52px;
	font-size: 14px;
	color: #f50;
}

.reg-bar {
	width: 360px;
	margin: 20px auto 0;
	font-size: 14px;
	overflow: hidden;
}

.reg-bar a {
	color: #fff;
	text-decoration: none;
}

.reg-bar a:hover {
	text-decoration: underline;
}

.reg-bar .reg {
	float: left;
}

.reg-bar .forget {
	float: right;
}

.dowebok ::-webkit-input-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok :-moz-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok ::-moz-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok :-ms-input-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

@media screen and (max-width: 500px) {
	* {
		box-sizing: border-box;
	}
	.dowebok {
		position: static;
		width: auto;
		height: auto;
		margin: 0 30px;
		border: 0;
		border-radius: 0;
	}
	.logo {
		margin: 50px auto;
	}
	.form-item {
		width: auto;
	}
	.form-item input, .form-item button, .reg-bar {
		width: 100%;
	}
}
</style>
	</head>
	<body>
		<form action="/loginUser" method="post">
			<div class="dowebok">
				<div class="form-item">
					<input id="username" type="text" name="username" autocomplete="off" placeholder="用户名">
					<p class="tip">${errMap.username}</p>
				</div>
				<div class="form-item">
					<input id="password" type="password" name="password" autocomplete="off" placeholder="登录密码">
					<p class="tip">${errMap.password}</p>
				</div>
				<div class="form-item">
					<button id="submit" type="submit">登 录</button>
					<!-- <button id="submit" type="submit" src="../jsp/index.jsp" >登 录</button> -->
				</div>

			</div>
		</form>
		<script src="../js/jquery.min.js"></script>
		<script>
			$(function() {
				$('input').val('')
				$('#submit').on('click', function() {
					$('.tip').show()
				})
			})
		</script>
	</body>
</html>
